#main{
    position: absolute;
    float:left;
    top: 60px;
    left:300px;
}

#gameCanvas{
    position: absolute;
    top:0px;
    left: 0px;
    z-index: 100;
}

.gameUI{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 800px;
    height: 600px;
}

#topInfo,#middleInfo,#menu,#bottomInfo{
    position: absolute;
    z-index: 999;
}

.gameUI .battleUI{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 800px;
    height: 600px;
}

.hide{
    display: none;
}

.battleUI #topInfo{
    position: absolute;
    top: 8px;
    left: 16px;
    width: 800px;
    height: 82px;
}

.battleUI #headerInfo{
    width: 600px;
    height: 56px;
}

.battleUI #headerInfo *{
    float: left;
}

.battleUI #player1Header{
    position: absolute;
    width: 56px;
    height: 56px;
    background: url(../res/face/Face0_1-1.bmp);
}

.battleUI #hpBoard{
    position: absolute;
    top: 8px;
    left: 56px;
    width: 324px;
    height: 57px;
    background: url(../res/control/sbgrp_33-1.png);
}

.battleUI #player1Hp{
    position: absolute;
    left: 4px;
    top: 8px;
    width: 160px;
    height: 40px;
    background: url(../res/control/sbgrp_35-1.png);
}

.battleUI #hpImg1{
    position: absolute;
    top: 22px;
    left: 0px;
    width: 28px;
    height: 16px;
    background: url(../res/control/sbgrp_34-1.png);
}

.battleUI #hpText1{
    position: absolute;
    top: 22px;
    left: 28px;
    font-weight : bold;
}

.battleUI #hpImg2{
    position: absolute;
    top: 22px;
    right: 0px;
    width: 28px;
    height: 16px;
    background: url(../res/control/sbgrp_34-1.png);
}

.battleUI #hpText2{
    position: absolute;
    top: 22px;
    right: 28px;
    font-weight : bold;
}

.battleUI #player2Hp{
    position: absolute;
    right: 4px;
    top: 8px;
    width: 160px;
    height: 40px;
    background: url(../res/control/sbgrp_36-1.png);
}

.battleUI #player2Header{
    position: absolute;
    width: 56px;
    height: 56px;
    left: 380px;
    background: url(../res/face/Face0_2-1.bmp);
}

.battleUI #playerInfo {
    position: relative;
    left: -6px;
    float: left;
}

.battleUI #player1Info{
    width: 188px;
    height: 28px;
    background: url(../res/control/sbgrp_25-1.png);
    float: left;
}

.battleUI #player2Info{
    position: absolute;
    left: 274px;
    width: 188px;
    height: 28px;
    background: url(../res/control/sbgrp_28-1.png);
    float: left;
}

.battleUI #player1Name{
    position: absolute;
    left: 10px;
    top: 6px;
    font-weight : bold;
}

.battleUI #player1Wuli{
    position: absolute;
    right: 10px;
    top: 6px;
    font-weight : bold;
}

.battleUI #player2Name{
    position: absolute;
    right: 10px;
    top: 6px;
    font-weight : bold;
}

.battleUI #player2Wuli{
    position: absolute;
    left: 10px;
    top: 6px;
    font-weight : bold;
}

.battleUI #menu{
    position: absolute;
    right: 10px;
    bottom:30px;
    width: 90px;
    height: 160px;
}

.battleUI #acceptButton{
    margin-bottom: 30px;
}

.battleUI #acceptButton.disable{
    width: 90px;
    height: 42px;
    background: url(../res/control/sbgrp_37-1.png);
    background-position:90px 0px;
}

.battleUI #acceptButton{
    width: 90px;
    height: 42px;
    background: url(../res/control/sbgrp_37-1.png);
    background-position:360px 0px;
}

.battleUI #acceptButton:hover{
      background: url(../res/control/sbgrp_37-1.png);
      background-position:180px 0px;
  }

.battleUI #acceptButton.defense{
    width: 90px;
    height: 42px;
    background: url(../res/control/sbgrp_40-1.png);
    background-position:360px 0px;
}

.battleUI #acceptButton.defense:hover{
    background: url(../res/control/sbgrp_40-1.png);
    background-position:180px 0px;
}

.battleUI #acceptButton.disable:hover{
    background: url(../res/control/sbgrp_37-1.png);
    background-position:90px 0px;
}

.battleUI #attackOrDefenseButton{
    margin-bottom: 5px;
}

.battleUI #attackOrDefenseButton{
     width: 90px;
     height: 42px;
     background: url(../res/control/sbgrp_38-1.png);
     background-position:360px 0px;
 }

.battleUI #attackOrDefenseButton:hover{
    width: 90px;
    height: 42px;
    background: url(../res/control/sbgrp_38-1.png);
    background-position:180px 0px;
}

.battleUI #attackOrDefenseButton.disable{
    width: 90px;
    height: 42px;
    background: url(../res/control/sbgrp_38-1.png);
    background-position:90px 0px;
}

.battleUI #attackOrDefenseButton.disable:hover{
    background: url(../res/control/sbgrp_38-1.png);
    background-position:90px 0px;
}


.battleUI #escapeButton{
    margin-bottom: 5px;
}

.battleUI #escapeButton{
    width: 90px;
    height: 42px;
    background: url(../res/control/sbgrp_39-1.png);
    background-position:360px 0px;
}

.battleUI #escapeButton.disable{
    width: 90px;
    height: 42px;
    background: url(../res/control/sbgrp_39-1.png);
    background-position:90px 0px;
}

.battleUI #escapeButton:hover{
    width: 90px;
    height: 42px;
    background: url(../res/control/sbgrp_39-1.png);
    background-position:180px 0px;
}

.battleUI #escapeButton.disable:hover{
    background: url(../res/control/sbgrp_39-1.png);
    background-position:90px 0px;
}


.battleUI #bottomInfo{
    width: 800px;
    height: 30px;
    position: absolute;
    bottom: 0px;
    background: url(../res/control/sbgrp_41-1.png);
}

.battleUI #bottomInfo.defense{
    width: 800px;
    height: 30px;
    position: absolute;
    bottom: 0px;
    background: url(../res/control/sbgrp_42-1.png);
}

.battleUI #middleInfo{
    width: 96px;
    height: 34px;
    position: absolute;
    top: 310px;
    left: 10px;
    background: url(../res/control/sbgrp_68-1.png);
}

.battleUI #middleInfo.defense{
    width: 96px;
    height: 34px;
    position: absolute;
    top: 310px;
    left: 10px;
    background: url(../res/control/sbgrp_69-1.png);
}

